<title>列表组</title>

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">列表组</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-icon btn-inverse btn-round">
                <i class="icon wb-pencil" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-icon btn-inverse btn-round">
                <i class="icon wb-refresh" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-icon btn-inverse btn-round">
                <i class="icon wb-settings" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">列表组样式</h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">基本</h4>
                            <p>最基本的列表组只使用了无序列表并添加了必须的类。</p>
                            <ul class="list-group list-group-full">
                                <li class="list-group-item active">1. CSS3 选择器</li>
                                <li class="list-group-item">2. CSS3 边框</li>
                                <li class="list-group-item">3. CSS3 背景</li>
                                <li class="list-group-item disabled">4. CSS3 文本</li>
                                <li class="list-group-item">5. CSS3 进阶</li>
                            </ul>
                        </div>

                    </div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">带边框</h4>
                            <p>在列表组上添加 <code>.list-group-bordered</code> 类实现。</p>
                            <ul class="list-group list-group-bordered">
                                <li class="list-group-item active">1. CSS3 选择器</li>
                                <li class="list-group-item">2. CSS3 边框</li>
                                <li class="list-group-item">3. CSS3 背景</li>
                                <li class="list-group-item disabled">4. CSS3 文本</li>
                                <li class="list-group-item">5. CSS3 进阶</li>
                            </ul>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">带分割线</h4>
                            <p>在列表组上添加 <code>.list-group-dividered</code> 来实现。</p>
                            <ul class="list-group list-group-dividered list-group-full">
                                <li class="list-group-item active">1. CSS3 选择器</li>
                                <li class="list-group-item">2. CSS3 边框</li>
                                <li class="list-group-item">3. CSS3 背景</li>
                                <li class="list-group-item disabled">4. CSS3 文本</li>
                                <li class="list-group-item">5. CSS3 进阶</li>
                            </ul>
                        </div>

                    </div>
                    <div class="clearfix visible-lg-block"></div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">带徽章</h4>
                            <p>在列表项中添加徽章。</p>
                            <ul class="list-group list-group-full">
                                <li class="list-group-item">
                                    <span class="badge badge-success">6</span> CSS3 选择器
                                </li>
                                <li class="list-group-item">
                                    CSS3 边框
                                </li>
                                <li class="list-group-item">
                                    <span class="badge badge-danger">3</span> CSS3 背景
                                </li>
                                <li class="list-group-item active">
                                    <span class="badge badge-info">10</span> CSS3 文本
                                </li>
                                <li class="list-group-item">
                                    CSS3 进阶
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">列表项为链接</h4>
                            <p>列表项为链接意味着列表组是 <code>&lt;div&gt;</code> 或其他元素而不是 <code>&lt;ul&gt;</code> 。</p>
                            <div class="list-group">
                                <a class="list-group-item active" href="javascript:;">CSS3 选择器</a>
                                <a class="list-group-item" href="javascript:;">CSS3 边框</a>
                                <a class="list-group-item" href="javascript:;">CSS3 背景</a>
                                <a class="list-group-item disabled" href="javascript:;">CSS3 文本</a>
                                <a class="list-group-item" href="javascript:;">CSS3 进阶</a>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">背景</h4>
                            <p>通过添加 <code>.bg-*</code> 来实现，您也可以添加 <code>.bg-inherit</code> 类。</p>
                            <div class="list-group bg-blue-grey-100 bg-inherit">
                                <a class="list-group-item blue-grey-500" href="javascript:;">
                                    <i class="icon wb-inbox" aria-hidden="true"></i> 收件箱
                                </a>
                                <a class="list-group-item blue-grey-500" href="javascript:;">
                                    <i class="icon wb-user" aria-hidden="true"></i> 简介
                                </a>
                                <a class="list-group-item blue-grey-500" href="javascript:;">
                                    <i class="icon wb-bell" aria-hidden="true"></i> 通知
                                </a>
                                <a class="list-group-item blue-grey-500" href="javascript:;">
                                    <i class="icon wb-envelope" aria-hidden="true"></i> 消息
                                </a>
                                <a class="list-group-item blue-grey-500" href="javascript:;">
                                    <i class="icon wb-tag" aria-hidden="true"></i> 书签
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">上下文类</h4>
                            <p>使用上下文类来定义列表项，可以为默认或者链接，也可以包含选中的类 <code>.active</code> 来表示状态。</p>
                            <ul class="list-group list-group-gap">
                                <li class="list-group-item list-group-item-warning">CSS3 选择器</li>
                                <li class="list-group-item list-group-item-success">CSS3 边框</li>
                                <li class="list-group-item list-group-item-info">CSS3 背景</li>
                                <li class="list-group-item list-group-item-danger">CSS3 文本</li>
                                <li class="list-group-item list-group-item-dark">CSS3 进阶</li>
                            </ul>
                        </div>

                    </div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">自定义内容</h4>
                            <p>我们可以向上面已添加链接的列表组添加任意的 HTML 内容。</p>
                            <div class="list-group">
                                <a class="list-group-item active" href="javascript:;">
                                    <h4 class="list-group-item-heading">阿里股价涨破100美元</h4>
                                    <p class="list-group-item-text">
                                        阿里巴巴在美股价涨破100美元整数位心理关口，为2015年1月份以来首次出现——刷新逾一年半高位至101.95美元。</p>
                                </a>
                                <a class="list-group-item" href="javascript:;">
                                    <h4 class="list-group-item-heading">欧洲家厨平台VizEat获380万欧元投资</h4>
                                    <p class="list-group-item-text">VizEat成立于2014年7月，总部位于巴黎，目前团队20多人，创始人兼CEO为Jean-Michel
                                        Petit。 </p>
                                </a>
                                <a class="list-group-item" href="javascript:;">
                                    <h4 class="list-group-item-heading">大众2.56亿美元收购纳威司达16.6%股份</h4>
                                    <p class="list-group-item-text">
                                        大众汽车公司周二宣布，将向北美商用车及发动机巨头纳威司达国际公司注资2.56亿美元，收购该公司16.6%的股权。</p>
                                </a>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">间隙</h4>
                            <p>添加 <code>.list-group-gap</code> 来使列表项之间保留间隙。</p>
                            <ul class="list-group list-group-gap">
                                <li class="list-group-item bg-blue-grey-100">
                                    <i class="icon wb-inbox" aria-hidden="true"></i> 收件箱
                                </li>
                                <li class="list-group-item bg-blue-grey-100">
                                    <i class="icon wb-user" aria-hidden="true"></i> 简介
                                </li>
                                <li class="list-group-item bg-blue-grey-100">
                                    <i class="icon wb-bell" aria-hidden="true"></i> 通知
                                </li>
                                <li class="list-group-item bg-blue-grey-100">
                                    <i class="icon wb-envelope" aria-hidden="true"></i> 消息
                                </li>
                                <li class="list-group-item bg-blue-grey-100">
                                    <i class="icon wb-tag" aria-hidden="true"></i> 书签
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="clearfix visible-lg-block"></div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap margin-lg-0">
                            <h4 class="example-title">用户列表组</h4>
                            <p>带状态的用户列表组。</p>
                            <ul class="list-group list-group-full">
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/1.jpg" alt="...">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">Herman</h4>
                                            <small>CEO</small>
                                        </div>
                                        <div class="media-right">
                                            <span class="status status-lg status-online"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/2.jpg" alt="...">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">hanwen</h4>
                                            <small>CIO</small>
                                        </div>
                                        <div class="media-right">
                                            <span class="status status-lg status-busy"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/3.jpg" alt="...">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">♫茉莉花</h4>
                                            <small>CTO</small>
                                        </div>
                                        <div class="media-right">
                                            <span class="status status-lg status-off"></span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/4.jpg" alt="...">
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">璇子</h4>
                                            <small>CVO</small>
                                        </div>
                                        <div class="media-right">
                                            <span class="status status-lg status-away"></span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="clearfix visible-sm-block visible-md-block"></div>
                    <div class="col-sm-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">媒体列表组</h4>
                            <p>包含了图片，用户名和描述的列表组。</p>
                            <ul class="list-group list-group-full">
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar avatar-online" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/5.jpg" alt="...">
                                                <i></i>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">江冰</h4>
                                            <p>话说。。缪定纯老师单身吗</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar avatar-away" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/6.jpg" alt="...">
                                                <i></i>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">五花肉</h4>
                                            <p>快去各大招聘网站投简历！！！来来来！</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar avatar-busy" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/7.jpg" alt="...">
                                                <i></i>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">紫萱</h4>
                                            <p>老板咱们公司看病能报销，你去看看眼睛。</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="media">
                                        <div class="media-left">
                                            <a class="avatar avatar-off" href="javascript:;">
                                                <img class="img-responsive" src="/images/portraits/8.jpg" alt="...">
                                                <i></i>
                                            </a>
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading">永不服输的Shirley</h4>
                                            <p>你觉得我萌，我就放心了。。。</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
